<!DOCTYPE html>  
<html>  
<head>  
<title>canvas</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>  
<body>
<span id="spend">time:0ms</span>
<input id="num_of_obj" value="40"/></input>
<button id="btn">try</button>
<br>
<canvas id="mycanvas" width="800" height="600" style="border: 1px solid;">
</canvas>
<script language="javascript" type="text/javascript">


var button=document.getElementById("btn");
var input=document.getElementById("num_of_obj");
button.onclick=function(){
	objNum=input.value;
	benchmark();
}
function robot(xx,yy,theta,h){
	this.x=xx;
	this.y=yy;
	this.angle=theta;
	this.scale=h;
	this.draw=function(){
		context.save();
		context.translate(this.x,this.y);
		context.rotate(this.angle/180*Math.PI);
		context.scale(this.scale,this.scale);
		context.drawImage(tmp,-150,-150,300,300);
		context.restore();
	}
	this.change=function(){
		var theta=this.angle/180*Math.PI;
		this.x=this.x+2*Math.sin(theta);//*this.scale;
		this.y=this.y-2*Math.cos(theta);//*this.scale;
		
		if(this.x>800-150*this.scale||this.x<150*this.scale)
			{this.angle=-this.angle;}
		if(this.y>600-150*this.scale||this.y<150*this.scale)
			{this.angle=180-this.angle;}
		if(this.angle<0)
			this.angle+=360;
		if(this.angle>=360)
			this.angle-=360;
	}
}

var mathsin=new Array();
var mathcos=new Array();

	var lastrand = 31029;
function randint(minn , maxn) {
	var d = lastrand / 32749;
	lastrand = (25903 * lastrand + 19997) % 32749;
	return parseInt(minn + d * (maxn - minn + 1));
}

	var mcanvas =document.getElementById("mycanvas");
	var context = mcanvas.getContext('2d');
	var tmp=document.createElement("canvas");
	tmp.width="300";
	tmp.height="300";
	var tmpctx=tmp.getContext("2d");
	
	var objs=new Array();
	var objNum=40;
	var old;
	var now;
		
	var img=new Image();
	img.src ="r1.jpg";	
	img.onload=init;
	
	
	
function init(){
	tmpctx.drawImage(img,0,0,800,800,0,0,300,300);
	var imgd = tmpctx.getImageData(0,0,300,300);
	var pix = imgd.data;
	//处理
	for(var i=0,n=pix.length;i<n;i+=4)
	{
		if(pix[i]==pix[i+1]&&pix[i+1]==pix[i+2]&&pix[i+2]==255)
		{
			pix[i+3]=0; //alpha
		}
	}
	tmpctx.putImageData(imgd,0,0);
	
	for(var i=0;i<1000;i++){
		var x=randint(160,640);
		var y=randint(160,440);
		var angle=randint(0,360);
		var scale=randint(50,100)/200.0;
		//var scale=0.5;
		var t=new robot(x,y,angle,scale);
		objs.push(t);
	}
	benchmark();
}	
	//var r1=new robot(400,400,0,0.5);
	//r1.draw();
	
	//document.write(""+r1.x);
	
	var tick=9;
	var spend=document.getElementById("spend");
	function benchmark() {
		old= new Date();
		context.clearRect(0, 0, 800, 600);
		for(var i=0;i<objNum;i++){
			objs[i].draw();
			objs[i].change();
		}
		now= new Date();
		tick++;
		//spend.innerText="spend:"+now-old+"ms"
		if((now-old)>1000/30){
			if(tick==10){
				tick=0;
				spend.innerText="fps:"+parseInt(1000/(now-old));
			}
			setTimeout(benchmark,0);
		}
		else{
			setTimeout(benchmark,1000/30-(now-old));
			if(tick==10){
				tick=0;
				spend.innerText="fps:30";
			}
		}
	}
	//benchmark();
	

</script>  

</body>  
</html>  